<!--
 * @Author: zcc
 * @Date: 2021-08-30 13:43:05
 * @LastEditors: Please set LastEditors
 * @Description: ref reactive toRefs
 * @FilePath: /workProject/vue3/vue3Learn/vue3-learn/src/views/CompositionsApi/ref.vue
-->
<template>
  <div class="contain">
    <h1>ref 函数</h1>
    <ol>
      <li>接受一个参数值并返回一个响应式且可改变的 ref 对象</li>
      <li>ref 对象拥有一个指向内部值的单一属性 .value</li>
      <li>当 ref 作为渲染上下文的属性返回并在模板中进行访问时，它将自动解构为内部值。无需.value在模板中追加：</li>
      <li>如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换</li>
    </ol>
    <div>{{ obj }}</div>
    <div>{{obj.org.name}}</div>
    <div>{{ count }}</div>
    <div class="strong">
      可以看到：
      ​ ref() 返回一个 RefImpl 对象
      ​ 可以看到 ref() 函数传入一个对象，返回值需要用 .value 访问，obj.value 返回的是一个 Proxy 代理响应式对象
    </div>
    <h1>reactive使用</h1>
    <div class="strong">reactive它主要是处理你的对象, 经过Proxy的加工后变为一个响应式的对象，类似于 Vue2.0 版本的 data 属性，需要注意的是加工后的对象跟原对象是不相等的，并且加工后的对象属于深度克隆的对象。</div>
    <h1>toRefs</h1>
    <div class="strong">toRefs() 可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据，配合 v-model 指令能完成数据的双向绑定，在开发中非常高效。</div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
export default {
  name: "",
  setup() {
    const obj = ref({
      org: {
        name: "w3c"
      }
    });
    const count = ref(0);

    const state = reactive({
      num: 1,
      val: ""
    });
    console.log(obj); // RefImpl {_rawValue: {…}, _shallow: false, __v_isRef: true, _value: Proxy}
    console.log(count); // RefImpl {_rawValue: 0, _shallow: false, __v_isRef: true, _value: 0}
    console.log(obj.value); // Proxy {org: {…}}
    console.log(obj.value.org.name); // W3C
    console.log(obj.value); // 0
    const submit = () => {
      console.log(state, "state");
    };
    onMounted(() => {});
    return {
      state,
      obj,
      count,
      ...toRefs(state),
      submit
    };
  }
};
</script>

<style lang="scss" scoped>
.strong {
  margin: 10px 0;
  font-weight: bolder;
  font-size: 18px;
}
</style>
